<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<script>


/*     for(var i=0;i<5;i++){
            let num=10
            // for的花括号形成了一个局部作用域
        }
        console.log(i);//5
        console.log(num);//num is not defined */


   for (let i = 0; i < 5; i++) {
        let num = 10
        // for的花括号形成了一个局部作用域
    }
    console.log(i);// i is not defined
    console.log(num);//num is not defined 

    // 上面这个循环其实是这样执行的
    /*
    {
       let i=0
       {
            let num=10
       }
    }
    {
       let i=1
       {
            let num=10
       }
    }
    。。。。。
    {
       let i=5
    }
    
    */





    let btn=document.getElementsByTagName("button")

    // for(var i=0;i<btn.length;i++){
    //     // 自定义索引
    //     btn[i].index=i
    //     btn[i].onclick=function(){
    //         console.log(this.index);
    //     }
    // }


    for(let i=0;i<btn.length;i++){
        btn[i].onclick=function(){
            console.log(i);
        }
    }
    /* 
    {
        let i=0
        {
            btn[i].onclick=function(){
                console.log(i);
            } 
        }
    }
    {
        let i=1
        {
            btn[i].onclick=function(){
                console.log(i);
            } 
        }
    }
    {
        let i=2
        {
            btn[i].onclick=function(){
                console.log(i);
            } 
        }
    }
    
    
    
    
    
    
    */

    






</script>